<!-- 
 项目 编辑 抽屉组件
  -->
<template>
  <el-drawer v-model="dialog" :title="title" :before-close="handleClose" direction="rtl" class="demo-drawer">
    <div class="demo-drawer__content">
      <el-form :model="form" label-position="top">
        <template>
          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Show Type</div>
                <div>项目类型</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Show Status</div>
                <div>项目状态</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Show Name</div>
                <div>项目名称</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Client Name</div>
                <div>客户名称</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Start Date</div>
                <div>起始时间</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Actual planned Due Date</div>
                <div>实际计划交付时间</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Total Assets</div>
                <div>总资产数</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Total Shots</div>
                <div>总镜头数</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Completion Percentage</div>
                <div>项目完成百分比(含镜头和资产)</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Total Bid</div>
                <div>报价 (人周)</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item
                ><div>Cots To Date</div>
                <div>已产生成本(人周)</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                ><div>Est. Overall Cost</div>
                <div>计划完成总成本(人周)</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="false">
            <el-col :span="12">
              <el-form-item>
                <div>Est.Profit Margin</div>
                <div>预计利润率(依据人周)</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div>Risk Value</div>
                <div>项目风险值</div>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" style="width: 100%" :rows="10" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? '提交中 ...' : '提交' }}
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElDrawer } from 'element-plus'
import http from '../../http'
import Api from '../../api'
import { useProjectssStore } from '../../stores'

const emit = defineEmits(['closeDrawer'])
const formLabelWidth = '80px'
const title = ref('')
const dialog = ref(false)
const loading = ref(false)

const form = reactive({
  id: -1,
  remark: '',
})
const openDrawer = async (id: number, cname: string, remark: string) => {
  title.value = cname
  form.id = id
  form.remark = remark
  dialog.value = true
}

defineExpose({
  openDrawer,
})
const onClick = async () => {
  loading.value = true
  await http({
    method: 'PUT',
    path: '/dev-api/oa/project',
    params: {
      id: form.id,
      remark: form.remark,
    },
  })

  const res = await Api.Projects.getProjectListAll()
  const { code, rows } = res
  if (code === 200) {
    useProjectssStore().setAllState(rows)
  }
  loading.value = false
  dialog.value = false
  emit('closeDrawer')
}

const handleClose = () => {
  if (loading.value) {
    return
  }
  dialog.value = false
  emit('closeDrawer')
}

const cancelForm = () => {
  loading.value = false
  dialog.value = false
}
</script>
<style lang="scss" scoped>
.drawer-footer {
  text-align: right;
}
</style>
